<template>
  <el-dialog
    :title="status.isAdd ? '规格添加' : '规格编辑'"
    :visible.sync="status.isshow"
    @closed="closed"
  >
    {{ form }}
    <el-form :model="form">
      <el-form-item label="规格名称" label-width="120px">
        <el-input v-model="form.specsname" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item
        label="规格属性"
        label-width="120px"
        v-for="(item, index) in fm"
        :key="index"
      >
        <div class="felx">
          <el-input v-model="item.name" autocomplete="off"></el-input>
          <el-button
            type="primary"
            v-if="index == 0"
            @click="fm.push({ name: '' })"
            >新增规格属性</el-button
          >
          <el-button type="danger" v-else @click="fm.splice(index, 1)"
            >删除</el-button
          >
        </div>
      </el-form-item>

      <el-form-item label="状态" label-width="120px">
        <el-switch
          v-model="form.status"
          :active-value="1"
          :inactive-value="2"
        ></el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="status.isshow = false">取 消</el-button>
      <el-button type="primary" v-if="status.isAdd" @click="con"
        >添 加</el-button
      >
      <el-button type="primary" v-else @click="updata">修 改</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { reqspecsadd, reqspecsedit, reqspecsinfo } from "../../../http/api";
import { successAlert, errorAlert } from "../../../utils/alert";
import { mapGetters, mapActions } from "vuex";
export default {
  components: {},
  props: ["status"],
  data() {
    return {
      form: {
        specsname: "",
        attrs: "",
        status: 1,
      },
      fm: [{ name: "" }, { name: "" }],
    };
  },
  methods: {
    ...mapActions({ reqList: "specs/reqList" }),
    closed() {},
    // 添加
    con() {
      this.checkeddata().then(() => {
        //拼接
        this.form.attrs = this.fm.map((item) => item.name).join(",");
        //  发请求
        reqspecsadd(this.form).then((res) => {
          if (res.data.code == 200) {
            //弹框
            successAlert(res.data.msg);
            // 2.form的数据清空一下
            this.empty();
            // 3.弹框消失
            this.status.isshow = false;
            // 4.列表需要重新渲染
            //调用vuex
            this.reqList();
          }
        });
      });
    },
    //验证数据
    checkeddata() {
      return new Promise((resolve) => {
        if (this.form.specsname === "") {
          errorAlert("规格不能为空");
          return;
        }
        if (this.arr.some((item) => item.value === "")) {
          errorAlert("规格属性均不能为空");
          return;
        }

        //[{value:1},{value:2},{value:3},{value:3}]
        let newArr = this.arr.map((item) => item.value); //[1,2,3,3]
        let newSetArr = Array.from(new Set(newArr)); //[1,2,3]

        if (newSetArr.length != this.arr.length) {
          errorAlert("规格属性需要唯一");
          return;
        }
        resolve();
      });
    },
    getOne(id) {
      reqspecsinfo({
        id: id,
      }).then((res) => {
        if (res.data.code == 200) {
          // 赋值
          [this.form] = res.data.list;
          this.fm = this.form.attrs.map((item) => {
            return { name: item };
          });
        }
      });
    },
    //修改
    updata() {
      this.form.attrs = this.fm.map((item) => item.name).join(",");
      reqspecsedit(this.form).then((res) => {
        if (res.data.code == 200) {
          successAlert(res.data.msg);
          this.empty();
          this.status.isshow = false;
          this.reqList();
        }
      });
    },
    empty() {
      this.form = {
        specsname: "",
        attrs: "",
        status: 1,
      };
      this.fm = [{ name: "" }, { name: "" }];
    },
  },
  mounted() {},
  computed: { ...mapGetters({ list: "specs/list" }) },
  watch: {},
};
</script>
<style scoped lang="less">
@import "../../../less/index.less";
.felx {
  display: flex;
}
.felx input {
  flex: 1;
}
</style>
